<template>
  <div class="picSelector">
    <div class="acea-row">
      <div class="upload acea-row row-center-wrapper" @click="openModal" :style="'width:'+size+'px;height:'+size+'px;'">
        <a-icon type="plus" style="font-size:18px" />
      </div>
      <template v-if="path.length > 0">
        <div class="acea-row"  style="min-width:900px;">
          <div class="upload acea-row row-center-wrapper" :style="'width:'+size+'px;height:'+size+'px;'" v-for="(item,index) in path" :key="index" >
            <div :style="'width:'+size+'px;height:'+size+'px;background-image:url('+item.thumbnail+');background-size:contain;background-repeat:no-repeat;background-position:50% 50%'" ></div>
            <!-- <video :style="'width:'+item.width*scale+'px;height:'+item.height*scale+'px;'" controls>
              <source :src="item.url" type="video/mp4">
            </video> -->
            <!-- <a-icon type="close-circle" theme="filled" class="clear" @click.stop="clearPath" /> -->
          </div>
        </div>
      </template>
    </div>
    <a-modal :dialog-style="{ top: '50px' }" :footer="null" title="视频选择器" v-model="show" :width="875" @cancel="outPut">
      <div class="acea-row">
        <div class="right">
          <div v-if="!showEmpty" class="btns acea-row row-middle">
            <a-space>
              <a-button type="primary" v-if="is_check" @click="outPut">使用选中视频</a-button>
              <a-button type="primary" v-else disabled>使用选中视频</a-button>
              <a-button v-if="is_check" @click="chouzhen">视频抽帧</a-button>
              <a-button v-else disabled>视频抽帧</a-button>
            </a-space>
            <div class="picList">
              <vue-waterfall-easy v-if="show" :width='780' :imgsArr="list" srcKey="thumbnail" :loadingDotCount='loadingDotCount' @click="clickFn" @preloaded="preloaded" linkRange='custom' @scrollReachBottom="getPicList">
                <div slot-scope="item">
                  <div class="img-info acea-row row-column">
                    <span class="img-info-item line1">{{item.value.videoName}}</span>
                    <span class="img-info-item line1">{{item.value.width}}*{{item.value.height}}</span>
                  </div>
                  <video class="video-location" alt="" controls v-if="item.value.is_showVideo">
                    <source :src="item.value.url" type="video/mp4">
                  </video>
                  <div v-if="!item.value.is_showVideo" class="play-button acea-row row-center-wrapper" @click.stop="item.value.is_showVideo = true">
                    <svg width="24" height="24" viewBox="0 0 24 24" focusable="false" class="dls-icon cc-creative-sdk-veui-icon"><path d="M6.49 3.838l12.96 7.29a1 1 0 010 1.744l-12.96 7.29A1 1 0 015 19.29V4.71a1 1 0 011.49-.872z" fill-rule="evenodd"></path></svg>
                  </div>
                  <a-checkbox class="img-checkBox" :checked="item.value.is_check" @click="imgClick(item.value.videoid)"></a-checkbox>
                </div>
              </vue-waterfall-easy>
            </div>
            <div class="page acea-row row-middle">
              共{{count}}张
            </div>
          </div>
          <a-empty v-if="showEmpty" description="暂无图片" />
        </div>
      </div>
    </a-modal>
    <modal title="添加分类" :show="showAddModal" @close="hideModal" width="500px">
      <a-form-model layout="horizontal" :model="classForm" ref="classForm" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="选则父级栏目" prop="pid" required>
          <a-tree-select
            v-model="classForm.pid"
            style="width: 300px"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="treeData2"
            tree-default-expand-all
            allow-clear
            :replaceFields="{key:'id', value: 'id'}"
          >
          </a-tree-select>  
        </a-form-model-item>
        <a-form-model-item label="分类名称" prop="title" required>
          <a-input v-model="classForm.title" style="width:300px" />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 6 }">
          <a-button type="primary" @click="addClass">添加</a-button>
        </a-form-model-item>
      </a-form-model>
    </modal>
  </div>
</template>

<script>
import vueWaterfallEasy from 'vue-waterfall-easy'
import { getVideoInfos } from '@/api/xinxiliu/getBaidu'
import modal from '@/components/common/modal'

export default {
  props:{
    value:{
      type:[Array],
      default:() => []
    },
    size:{
      type:[String,Number],
      default:120
    }
  },
  data(){
    return{
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      show:false,
      showAddModal:false,
      classId:null,
      moveValue:null,
      basePath:'/api',
      uploading:false,
      page:1,
      limit:10,
      list:[],
      imgsArr:[], // 瀑布流使用的list, 新增于分页
      count:0,
      is_check:false, //是否有图片选中
      check_id:[], //选中图片id
      visible:false,
      treeData:[],
      treeData2:[],
      path:[],
      classForm:{
        title:'',
        pid:null
      },
      scale:0.3,
      loadingDotCount:3,
      myVideoRef:[],
      showEmpty:false,

      panelIdx:0,  // 按住特殊键连选功能，用于计数
      startPanelIndex:0,
      endPanelIndex:0,
    }
  },
  created() {
    this.getPath(this.value)
  },
  methods: {
    openModal(){
      this.page = 1
      this.list = []
      this.show = true
      this.getPicList()
      this.getClass()
      this.getPath(this.value)
      this.panelIdx = 0
    },
    getPath(value){
      if(value.length > 0){
        this.path = value
      }
    },
    clearPath(){
      this.path = []
      this.$emit("confirm",'')
    },
    getPicList(){
      const that = this
      this.showEmpty = false
      this.loadingDotCount = 3
      let params = {
        pageNo: this.page,
        pageSize: this.limit
      }
      getVideoInfos(params).then((e) => {
        console.log(e)
        if(e.errcode == 0){
          for(let i of e.data.body.data){
            if(that.path.find(o=>o.videoid == i.videoid)){
              i.is_check = true
            }else{
              i.is_check = false
            }
            i.is_showVideo = false
          }
          if(e.data.body.data.length != 0){
            that.list = that.list.concat(e.data.body.data) 
            that.page++;
            if(that.list.lenght < 10){ // 防止数量不够导致上滑加载不触发
              that.getPicList()
            }
          }else{
            that.preloaded()
          }
          that.count = e.data.body.expand.totalCount
          if(this.list.length == 0){
            this.showEmpty = true
          }
          // this.loadingDotCount = 0
          // this.imgsArr = []
          // that.setList()
          that.$nextTick(()=>{
            
          })
        }
      });
    },
    setList(){
      // 设置list,用于分页
      let start = (this.page - 1)*this.limit
      let end = this.page*this.limit
      let list = this.list.slice(start, end)
      console.log(this.page, start, end, list)
      if(list.lenght != 0){
        this.imgsArr = this.imgsArr.concat(list)
        this.page++;
      }
    },
    clickFn(event, { index, value }){
      // 阻止a标签跳转
      event.preventDefault()
      // 只有当点击到图片时才进行操作
      if (event.target.tagName.toLowerCase() == 'img') {
        console.log('img clicked',index, value)
        this.imgClick(value.videoid)
      }
    },
    preloaded(){
      this.loadingDotCount = 0
      setTimeout(() => {
        let alink = document.getElementsByClassName('alink')
        for(let i of alink){
          i.href = 'javascript:;'
          i.target = ''
        }
      }, 0);
    },
    getClass(){
      
    },
    outPut(){
      // if(this.is_check){
      let path = this.list.filter(e=>this.check_id.find(o=>o == e.videoid))
      // let path = this.list.find(e=>e.id == this.check_id).path
      this.$emit("confirm",path)
      this.path = path
      this.show = false
      // }else{
      //   this.$message.error("未选中图片")
      // }
    },
    chouzhen(){ //视频抽帧
      if(this.check_id.length > 1){
        this.$message.error('视频抽帧只支持单视频')
      }else if(this.check_id.length == 1){
        this.$router.push('/xinxiliu/chouzhen?videoId='+this.check_id[0])
        this.show = false
      }
    },
    search(){
      this.getPicList()
    },
    pageChange(e){
      this.page = e
      this.getPicList()
    },
    imgClick(id, isLianXuan=false){
      let check_id = []
      for(let i of this.list){
        if(i.videoid == id){
          // i.is_check = !i.is_check

          !isLianXuan ? (i.is_check = !i.is_check) : i.is_check = true

          isLianXuan || this.goLianXuan(i)  //没在执行连选时，执行连选函数
        }
        if(i.is_check){
          check_id.push(i.videoid)
        }
      }
      if(check_id.length > 0){
        this.is_check = true
      }else{
        this.is_check = false
      }
      this.check_id = check_id
    },
    goLianXuan(i){
      //制作alt全选
      i.is_check && event.altKey?this.panelIdx++:this.panelIdx=0
      // console.log(i.is_check, event.altKey, this.panelIdx, this.list)
      if(this.panelIdx==0){
        // this.startPanelIndex = 0
      }
      if(this.panelIdx == 1){
        this.startPanelIndex = this.list.findIndex(o=>o.videoid == i.videoid)
      }
      if(this.panelIdx==2){
        this.endPanelIndex = this.list.findIndex(o=>o.videoid == i.videoid)
        let startPanelIndex = Math.min(this.startPanelIndex, this.endPanelIndex)
        let endPanelIndex = Math.max(this.startPanelIndex, this.endPanelIndex)
        // console.log(this.list.slice(startPanelIndex , endPanelIndex))
        this.list.slice(startPanelIndex , endPanelIndex).forEach(e => {
          this.imgClick(e.videoid, true)
        });
        setTimeout(() => {
          this.imgClick(-1, false)
        }, 1);
        this.panelIdx=0
      }
    },
    addClass(){
      // const that = this
      this.$refs.classForm.validate(vaild=>{
        if(vaild){
          console.log(this.classForm)
        }
      })
    },
    move(e){
      const that = this
      if(e){
        if(this.is_check){
          // let data = {
          //   id:this.check_id,
          //   class:this.moveValue
          // }
        }else{
          that.moveValue = null
          this.$message.error("未选中图片")
        }
      }
    },
    delPic(){
      // const that = this
      if(this.is_check){
        // let data = {
        //   id:this.check_id,
        // }
      }else{
        this.$message.error("未选中图片")
      }
    },
    uploadChange(info){
      if (info.file.status === 'uploading') {
        this.uploading = true;
        return;
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        let res = info.file.response
        this.uploading = false;
        if(res.status == 200){
          this.$message.success(res.msg)
          this.getPicList()
        }else{
          this.$message.error(res.msg)
        }
      }
    },
    hideModal(){
      this.showAddModal = false
      this.$refs.classForm.resetFields()
    },
  },
  watch:{
    value(e){
      this.getPath(e)
    }
  },
  components:{
    modal,
    vueWaterfallEasy,
  },
}
</script>

<style scoped>
  .picSelector .upload{
    border: 1px dotted rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.02);
    cursor: pointer;
    position: relative;
    width: 100px;
    height: 100px;
    margin: 10px 10px 10px 0;
  }
  .picSelector .upload .clear{
    color: #f5222d;
    font-size: 14px;
    position: absolute;
    top: -7px;
    right: -7px;
  }
  .left{
    width: calc(30% - 24px);
    padding-right: 24px;
    border-right: 1px solid #eeeeee;
  }
  .right{
    padding-left: 24px;
    flex: 1;
  }
  .right .picList{
    width: 100%;
    margin-top: 24px;
    height: 600px;
    overflow-y: auto;
  }
  .right .picList img{
    display: block;
    /* width: 120px;
    height: 120px; */
    margin-bottom: 10px;
    margin-right: 10px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .right .picList .imgCheck{
    border: 2px solid #5fb878;
  }
  .right .picList img:nth-child(5n){
    margin-right: 0;
  }
  .right .page{
    margin-top: 20px;
  }
  .img-info{
    width: 100%;
    display: block;
    padding: 5px 10px;
    color: #222222;
  }
  .img-checkBox{
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
  }
  .video-location{
    position: absolute;
    width: calc(100% - 20px);
    height: calc(100% - 70px);
    left: 10px;
    top: 10px;
    z-index: 5;
  }
  .play-button{
    width: 40px;
    height: 40px;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s;
    transform-origin: top left;
    font-size: 16px;
    border-color: transparent;
    background-color: rgba(0,0,0,.6);
    color: #fff;
    cursor: pointer;
    z-index: 10;
  }
  .img-info-item{
    margin-bottom: 0px;
    width: 100%;
    display: block;
  }
  .img-info-item:last-of-type{
    margin-bottom: 0;
  }
img{
	width: 100%;
	height: 100%;
	display: block;
}

.acea-row {
	display: flex;
	flex-wrap: wrap;
}

.acea-row.row-top {
	align-items: flex-start;
}

.acea-row.row-middle {
	align-items: center;
}

.acea-row.row-bottom {
	align-items: flex-end;
}

.acea-row.row-left {
	justify-content: flex-start;
}

.acea-row.row-center {
	justify-content: center;
}

.acea-row.row-right {
	justify-content: flex-end;
}

.acea-row.row-between {
	justify-content: space-between;
}

.acea-row.row-around {
	justify-content: space-around;
}

.acea-row.row-column {
	flex-direction: column;
}

.acea-row.row-column-between {
	flex-direction: column;
	justify-content: space-between;
}

.acea-row.row-column-around {
	flex-direction: column;
	justify-content: space-around;
}

.acea-row.row-center-wrapper {
	align-items: center;
	justify-content: center;
}

.acea-row.row-between-wrapper {
	align-items: center;
	justify-content: space-between;
}

.line1 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.line2{
	word-break: break-all;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
</style>